import React, {PureComponent} from "react"
import {WriterWrapper, WriterItem, WriterName, WriterDesc} from "../style";
import {connect} from "react-redux"

class Writer extends PureComponent {

  render() {
    const {list} = this.props
    return (
      <div>
        <WriterWrapper>
          {
            list.map(item => {
              return (
                <WriterItem key={item.get("id")}>
                  <img src={item.get("avatorUrl")} alt="" className="avator"/>
                  <div className="writerName">
                    <WriterName>{item.get("name")}</WriterName>
                    <WriterDesc>{item.get("desc")}</WriterDesc>
                  </div>
                </WriterItem>
              )
            })
          }
        </WriterWrapper>
      </div>
    )
  }
}

const mapState = (state) => ({
  list: state.getIn(["home", "WriterList"])
})

export default connect(mapState, null)(Writer);
